<template>
  <div class="page-container">
    <!-- 页面工具栏 -->
    <el-card class="box-card">
      <div class="page-tool-box">
        <div class="search-box">
          <div class="label">笼子编码：</div>
          <el-input
            placeholder="请输入内容"
            v-model="searchForm.num"
            clearable
            class="search-input"
          >
          </el-input>
          <div class="label">领养时间：</div>
          <el-date-picker
            v-model="searchForm.date"
            type="datetime"
            placeholder="选择日期时间"
            class="search-input"
          >
          </el-date-picker>
          <el-button type="success" class="search-btn">搜索</el-button>
        </div>
      </div>
    </el-card>

    <!-- 表格及分页器 -->
    <el-card class="table-card">
      <TemplateTable
        class="table-box"
        :tableData="tableData"
        :columns="columns"
      >
        <template #adoptImg="{ row }">
          <el-image
            class="adoptImg"
            :src="row.adoptImg"
            :preview-src-list="[row.adoptImg]"
          >
          </el-image>
        </template>
        <template #adoptDate="{ row }">
          {{ row.adoptDate + "插槽测试" }}
        </template>
        <template #operation>
          <el-button
            type="info"
            size="mini"
            round
            @click="detailDialog.visible = true"
            >详情</el-button
          >
          <el-button type="warning" size="mini" round>退养</el-button>
        </template>
      </TemplateTable>
    </el-card>

    <!-- 领养信息弹窗 -->
    <el-dialog
      :title="detailDialog.title"
      :visible.sync="detailDialog.visible"
      width="50%"
    >
      <el-row class="detail-dialog-content">
        <div class="divider-line"></div>
        <el-col :span="12">
          <div class="detail-dialog-part">
            <el-row type="flex" justify="center">
              <el-image
                style="width: 100px; height: 100px; border-radius: 50%"
                :src="detailDialog.petInfoData.avator"
              ></el-image>
            </el-row>
            <div class="text-box">
              <div class="desc-item">
                <div class="desc-item-label">宠物名：</div>
                <div class="desc-item-text">咖啡豆</div>
              </div>
              <div class="desc-item">
                <div class="desc-item-label">性别：</div>
                <div class="desc-item-text">母</div>
              </div>
              <div class="desc-item">
                <div class="desc-item-label">爱好：</div>
                <div class="desc-item-text">游泳</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="detail-dialog-part right">
            <div class="title">领养人信息</div>
            <div class="text-box">
              <div class="desc-item">
                <div class="desc-item-label">姓名：</div>
                <div class="desc-item-text">张三丰</div>
              </div>
              <div class="desc-item">
                <div class="desc-item-label">姓名：</div>
                <div class="desc-item-text">张三丰</div>
              </div>
              <div class="desc-item">
                <div class="desc-item-label">姓名：</div>
                <div class="desc-item-text">张三丰</div>
              </div>
              <div class="desc-item">
                <div class="desc-item-label">姓名：</div>
                <div class="desc-item-text">张三丰</div>
              </div>
              <div class="desc-item">
                <div class="desc-item-label">姓名：</div>
                <div class="desc-item-text">张三丰</div>
              </div>
              <div class="desc-item">
                <div class="desc-item-label">简介：</div>
                <div class="desc-item-text">
                  张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import TemplateTable from "@/components/template-table"
export default {
  components: {
    TemplateTable
  },
  data() {
    return {
      tableData: [
        {
          adoptImg:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201706%2F01%2F20170601211744_tSwai.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647701013&t=5c59253c6f03b69ca7281207babcd46b",
          petName: "大黄",
          adoptDate: "2022/02/16 23:46",
          adoptPerson: "张先生"
        },
        {
          adoptImg:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201706%2F01%2F20170601211744_tSwai.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647701013&t=5c59253c6f03b69ca7281207babcd46b",
          petName: "小白",
          adoptDate: "2022/02/14 13:23",
          adoptPerson: "李女士"
        }
      ],
      searchForm: {
        num: "",
        date: ""
      },
      detailDialog: {
        title: "领养信息",
        visible: false,
        petInfoData: {
          avator:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F016fab554be8bb000001bf7258c961.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647702814&t=3f31384dbf3de3dade3a9b5b49dc3e1c"
        },
        adoptInfoData: {}
      }
    }
  },
  computed: {
    columns() {
      return [
        {
          propName: "adoptImg",
          label: "领养合照",
          slotName: "adoptImg"
        },
        {
          propName: "petName",
          label: "宠物名字"
        },
        {
          propName: "adoptDate",
          label: "领养日期",
          slotName: "adoptDate"
        },
        {
          propName: "adoptPerson",
          label: "领养人",
          formatter: this.formatCol
        },
        {
          propName: "",
          label: "操作",
          width: "300",
          slotName: "operation"
        }
      ]
    }
  },
  methods: {
    formatCol({ row, column }) {
      return row[column.property] + "formatter测试"
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/page.scss";
.page-container {
  .table-card {
    margin-top: 40px;
  }
  .table-box {
    .adoptImg {
      width: 100px;
      height: 100px;
      border-radius: 6px;
    }
  }
  .detail-dialog-content {
    position: relative;
    .divider-line {
      position: absolute;
      top: 0;
      left: 50%;
      width: 1px;
      height: 100%;
      background-color: #ddd;
    }
    .detail-dialog-part {
      padding-bottom: 20px;
      max-height: 450px;
      overflow-y: auto;
      .text-box {
        margin-top: 40px;
        .desc-item {
          display: flex;
          div {
            font-size: 16px;
            &.desc-item-label {
              width: 120px;
              text-align: right;
            }
            &.desc-item-text {
              flex: 1;
            }
          }
          &:not(:first-child) {
            margin-top: 10px;
          }
        }
      }
      &.right {
        .title {
          font-size: 20px;
          font-weight: bold;
          text-align: center;
        }
      }
    }
  }
}
</style>
